<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <!-- 左侧Logo -->
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-blue-600 rounded-full overflow-hidden">
              <img src="../../../头像.jpg" alt="头像" class="w-full h-full object-cover" />
            </div>
            <span class="text-lg font-semibold text-gray-900">校园快递代拿</span>
          </div>

          <!-- 右侧导航 -->
          <div class="flex items-center space-x-6">
            <div class="text-blue-600 font-medium flex items-center space-x-1">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
              </svg>
              <span>身份选择</span>
            </div>
            <button @click="handleLogout" class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg transition-colors flex items-center space-x-1">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
              </svg>
              <span>退出登录</span>
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 系统公告横幅 -->
      <div v-if="topAnnouncement" class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8 flex items-start justify-between">
        <div class="flex items-start space-x-3 flex-1">
          <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <div class="flex-1">
            <p class="text-gray-700 text-sm">
              <span class="font-semibold text-gray-900">【{{ topAnnouncement.type === 'system' ? '系统' : topAnnouncement.type === 'activity' ? '活动' : '通知' }}】</span>
              {{ topAnnouncement.title }}
            </p>
          </div>
        </div>
        <span class="text-xs text-gray-500 whitespace-nowrap ml-4">{{ formatDate(topAnnouncement.published_at || topAnnouncement.created_at) }}</span>
      </div>

      <!-- 身份选择卡片区域 -->
      <div class="grid md:grid-cols-3 gap-8 mb-16">
        <!-- 下单者身份卡片 -->
        <div class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow p-8 h-full flex flex-col">
          <div class="flex flex-col items-center flex-1">
            <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mb-6">
              <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
              </svg>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 mb-3">选择下单者身份</h2>
            <p class="text-gray-600 text-center mb-6 text-sm">作为下单者，您可以发布快递代拿需求，由代拿员为您提供配送服务</p>
            <div class="w-full space-y-3 mb-8">
              <div class="flex items-start space-x-2">
                <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                <span class="text-gray-700 text-sm">发布快递代拿订单，设定配送要求</span>
              </div>
              <div class="flex items-start space-x-2">
                <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                <span class="text-gray-700 text-sm">实时追踪订单状态，与代拿员沟通</span>
              </div>
              <div class="flex items-start space-x-2">
                <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                <span class="text-gray-700 text-sm">订单完成后自行评价，保障服务质量</span>
              </div>
            </div>
            <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 rounded-lg transition-colors mt-auto" @click="$router.push('/order/publish')">确认选择</button>
          </div>
        </div>

        <!-- 代拿员身份卡片 -->
        <div class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow p-8 h-full flex flex-col">
          <div class="flex flex-col items-center flex-1">
            <div class="w-20 h-20 bg-green-600 rounded-full flex items-center justify-center mb-6">
              <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
              </svg>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 mb-3">选择代拿员身份</h2>
            <p class="text-gray-600 text-center mb-6 text-sm">作为代拿者，您可以接取代拿订单，为下单者提供快递配送服务并赚取报酬</p>
            <div class="w-full space-y-3 mb-8">
              <div class="flex items-start space-x-2"><svg class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span class="text-gray-700 text-sm">浏览附近订单，自由选择接单</span></div>
              <div class="flex items-start space-x-2"><svg class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span class="text-gray-700 text-sm">完成配送后获得报酬，灵活赚取收益</span></div>
              <div class="flex items-start space-x-2"><svg class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span class="text-gray-700 text-sm">积累评分和信誉，提升接单优先级</span></div>
            </div>
            <button class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 rounded-lg transition-colors mt-auto" @click="$router.push('/courier/hall')">确认选择</button>
          </div>
        </div>

        <!-- 管理员身份卡片 -->
        <div class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow p-8 h-full flex flex-col">
          <div class="flex flex-col items-center flex-1">
            <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mb-6">
              <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
              </svg>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 mb-3">选择管理员身份</h2>
            <p class="text-gray-600 text-center mb-6 text-sm">作为管理员，您可以管理用户、订单和平台设置，维护平台运营秩序</p>
            <div class="w-full space-y-3 mb-8">
              <div class="flex items-start space-x-2">
                <svg class="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                <span class="text-gray-700 text-sm">管理用户信息，审核身份认证</span>
              </div>
              <div class="flex items-start space-x-2">
                <svg class="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                <span class="text-gray-700 text-sm">处理订单纠纷，维护平台秩序</span>
              </div>
              <div class="flex items-start space-x-2">
                <svg class="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                <span class="text-gray-700 text-sm">配置系统参数，发布公告通知</span>
              </div>
            </div>
            <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 rounded-lg transition-colors mt-auto" @click="$router.push('/admin/login')">确认选择</button>
          </div>
        </div>
      </div>

      <!-- 常见问题区域 -->
      <div class="max-w-3xl mx-auto">
        <h2 class="text-2xl font-bold text-gray-900 text-center mb-8">常见问题</h2>
        <div class="bg-white rounded-xl shadow-sm divide-y divide-gray-100">
          <div v-for="(item, idx) in faqList" :key="idx" class="faq-item">
            <button @click="toggleFaq(idx)" class="w-full px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors">
              <span class="text-gray-900 font-medium text-left">{{ item.q }}</span>
              <svg class="w-5 h-5 text-gray-400 faq-arrow" :class="{ 'active': isOpen(idx) }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </button>
            <div class="faq-answer px-6 pb-4" :class="{ 'active': isOpen(idx) }" v-show="isOpen(idx)">
              <p class="text-gray-600 text-sm whitespace-pre-line">{{ item.a }}</p>
            </div>
          </div>
        </div>
        <div class="text-center mt-6">
          <a href="#" class="text-blue-600 hover:text-blue-700 font-medium inline-flex items-center space-x-1">
            <span>查看全部常见问题</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="text-center text-sm text-gray-600">
          <p>© 2023 校园快递代拿平台 版权所有 | <a href="#" class="text-blue-600 hover:text-blue-700">隐私政策</a> | <a href="#" class="text-blue-600 hover:text-blue-700">使用条款</a></p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'IdentityHome',
  data() {
    return {
      openFaqIndexes: new Set(),
      topAnnouncement: null,
      faqList: [
        { q: '如何切换用户身份？', a: '在「个人中心 > 账号与安全」里找到「切换身份」。\n切换后会进入对应身份的功能首页（下单者/代拿员）。' },
        { q: '可以同时拥有两种身份吗？', a: '可以。同一账号可同时具有下单者与代拿员身份。\n您可按需随时切换，不影响历史订单与信用分。' },
        { q: '不同身份的权限有什么区别？', a: '下单者：发布订单、查看进度、支付与评价；\n代拿员：浏览/接单、取件配送、上传凭证、申请结算。' },
        { q: '成为代拿员需要哪些条件与材料？', a: '需完成手机号实名认证、在校生认证（学生证/学信网截图其一），并通过基础培训测验。\n审核通过后即可接单，首次接单前需完成风险提示确认。' },
        { q: '收费与结算规则是什么？', a: '下单者费用=基础代拿费+距离/重量附加（如有）+夜间/恶劣天气附加（如有）。\n代拿员收入=订单实收-平台服务费（比例见公告）。T+1自动结算至零钱账户，满额可提现。' },
        { q: '下单后多久能送达？', a: '一般30-90分钟内（视校区距离、取件点排队与天气）。\n急件可在下单时选择「加急」，系统将优先推送给高活跃度代拿员。' },
        { q: '取件码/取件短信要怎么提供？', a: '请在下单时填写或在接单前通过聊天窗口发送给代拿员。\n涉及隐私信息的内容仅对当前订单可见，完成后自动做脱敏处理。' },
        { q: '如何与代拿员沟通？', a: '订单详情页支持IM聊天与匿名电话。\n如长时间未回复，可在订单页发起「催单」，或联系平台客服介入。' },
        { q: '订单能取消或修改吗？', a: '未被接单：可免费取消或修改。\n已接单未取件：可与代拿员协商修改，取消可能产生跑空补偿。\n已取件：不可取消，仅可修改收件备注（如楼栋门禁）。' },
        { q: '如果物品丢失/损坏怎么办？', a: '请在订单完成前发起「问题订单」。平台将依据取证材料判责并理赔。\n贵重/易碎物品建议在下单时选择「高价值申报」并拍照留存。' },
        { q: '雨雪/台风等特殊天气如何处理？', a: '平台将根据校区发布天气预警，适度延长承诺时效并增加附加费以保障接单率。\n如遇停运或封控，系统会提示不可接单并建议改约时间。' },
        { q: '代拿员评分规则是什么？', a: '评分=完成率、准时率、投诉率、服务分加权得出。\n高评分将获得更高排序与更多优先推送。恶意差评可申诉。' },
        { q: '支持哪些支付方式？', a: '支持微信支付与余额支付；部分校区支持校园卡代扣。\n支付失败可在订单详情页点击「重新支付」。' },
        { q: '如何开具发票？', a: '完成订单后在「订单详情 > 开具发票」提交抬头信息，电子发票将在1-3个工作日发送至预留邮箱。' },
        { q: '隐私如何保护？', a: '手机号采用隐私号中转，聊天对话仅用于当前订单。\n订单完成后，取件码等敏感字段做脱敏处理并按合规周期清理。' },
        { q: '长时间无人接单怎么办？', a: '可提高代拿费或开启加急；也可更换取件时间/地址。\n仍未接单可取消订单，费用原路退回。' }
      ]
    }
  },
  methods: {
    isOpen(index) {
      return this.openFaqIndexes.has(index)
    },
    toggleFaq(index) {
      if (this.openFaqIndexes.has(index)) {
        this.openFaqIndexes.delete(index)
      } else {
        this.openFaqIndexes.add(index)
      }
      // 触发视图更新
      this.openFaqIndexes = new Set(this.openFaqIndexes)
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      try {
        const date = new Date(dateStr)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
      } catch {
        return dateStr
      }
    },
    async fetchTopAnnouncement() {
      try {
        const response = await fetch('/api/announcements?limit=1')
        const result = await response.json()
        if (result.success && result.data && result.data.length > 0) {
          // 获取第一个置顶公告或最新公告
          const top = result.data.find(a => a.is_top) || result.data[0]
          this.topAnnouncement = top
        }
      } catch (e) {
        console.error('获取公告失败', e)
      }
    },
    handleLogout() {
      // 清除所有本地存储的用户信息
      localStorage.removeItem('userToken')
      localStorage.removeItem('userId')
      localStorage.removeItem('userPhone')
      localStorage.removeItem('userInfo')
      localStorage.removeItem('userNickname')
      localStorage.removeItem('userAvatar')
      localStorage.removeItem('orderUserId')
      localStorage.removeItem('courierUserId')
      // 跳转到登录页面
      this.$router.push('/login')
    }
  },
  mounted() {
    this.fetchTopAnnouncement()
  }
}
</script>

<style scoped>
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.faq-answer.active {
  max-height: 200px;
  transition: max-height 0.3s ease-in;
}
.faq-arrow {
  transition: transform 0.3s ease;
}
.faq-arrow.active {
  transform: rotate(180deg);
}
</style>



